import React, { useCallback, useContext, useEffect, useRef, useState,useLayoutEffect } from 'react';
import { useAsyncEffect } from 'ahooks';
import useChat from '@/hooks/use-chat';
import Completion from './completion';
import { ChartData, ChatHistoryResponse } from '@/types/chat';
import { apiInterceptors, getChatHistory } from '@/client/api';
import { ChatContext } from '@/app/chat-context';
import Header from './header';
import Chart from '../chart';
import classNames from 'classnames';
import { cloneDeep } from 'lodash';
import MuiLoading from '../common/loading';
import { Empty } from 'antd';
import { useSearchParams } from 'next/navigation';
import { getInitMessage } from '@/utils';
import { flushSync } from 'react-dom';
function useCallbackState (state) {
  const cbRef = useRef();
  const [data, setData] = useState(state);

  useEffect(() => {
      cbRef.current && cbRef.current(data);
  }, [data]);

  return [data, function (val, callback) {
      cbRef.current = callback;
      setData(val);
  }];
}
const ChatContainer = () => {
  const searchParams = useSearchParams();
  const { scene, chatId, model, setModel, history, setHistory, setAudioMessage, audioMessage } = useContext(ChatContext);
  const {cancelRequest,chat} = useChat({});
  const initMessage = (searchParams && searchParams.get('initMessage')) ?? '';

  const [loading, setLoading] = useState<boolean>(false);
  const [isLoading, setIsLoading] = useState(false);
  const [chartsData, setChartsData] = useState<Array<ChartData>>();
  const [tempMessage, setTempMessage] = useState(null);
  const getHistory = async () => {
    setLoading(true);
    /* const [, res] = await apiInterceptors(getChatHistory(chatId));
    setHistory(res ?? []); */
    setLoading(false);
  };

  const getChartsData = (list: ChatHistoryResponse) => {
    const contextTemp = list[list.length - 1]?.context;
    if (contextTemp) {
      try {
        const contextObj = JSON.parse(contextTemp);
        setChartsData(contextObj?.template_name === 'report' ? contextObj?.charts : undefined);
      } catch (e) {
        setChartsData(undefined);
      }
    }
  };
  useAsyncEffect(async () => {
    const initMessage = getInitMessage();
    if (initMessage && initMessage.id === chatId) return;
    await getHistory();
  }, [initMessage, chatId]);

  useEffect(() => {
    if (!history.length) return;
    /** use last view model_name as default model name */
    const lastView = history.filter((i) => i.role === 'view')?.slice(-1)?.[0];
    lastView?.model_name && setModel(lastView.model_name);

    getChartsData(history);
  }, [history, history.length, setModel]);

  useEffect(() => {
    return () => {
      setHistory([]);
    };
  }, [setHistory]);
  useLayoutEffect(() => {
    console.log("tempMessage",tempMessage);
  }, [tempMessage]);
  const handleChat = useCallback(
    (content: string, data?: Record<string, any>, text?: string) => {
      console.log(content, text);

      return new Promise<void>((resolve) => {
        const tempHistory: ChatHistoryResponse = [
          ...history,
          { role: 'human', context: content, model_name: model, order: 0, time_stamp: 0 },
          { role: 'view', context: '', model_name: model, order: 0, time_stamp: 0 ,isCancel:false},
        ];
        const index = tempHistory.length - 1;
        setHistory([...tempHistory]);
        chat({
          data: {
            ...data,
            chat_mode: scene || 'chat_normal',
            model_name: model,
            user_input: content || text,
            select_param: 'Industrial_BU_database',
          },
          chatId,
          onMessage: (message) => {
            console.log('message',message);
            tempHistory[index].context = tempHistory[index].context + message;
            //console.log('tempHistory[index].context',tempHistory[index].context);
            // flushSync(()=>{
            //   setTempMessage(()=>{
            //     tempHistory[index].context = tempHistory[index].context + message;
            //     return tempHistory[index].context
            //   });
            // })
            setTempMessage(()=>tempHistory[index].context)
            console.log("temp1",tempMessage)
            //setIsLoading(false);
            resolve()
          },
          onDone: () => {
            getChartsData(tempHistory);
            setIsLoading(false);
            resolve();
          },
          onClose: () => {
            console.log('onClose')
            /* window.contentWindow.postMessage() */
            console.log(tempHistory[index].context);
            getChartsData(tempHistory);
            setIsLoading(false);
            resolve();
          },
          onError: (message) => {
            tempHistory[index].context = message;
            setIsLoading(false);
            setHistory([...tempHistory]);
            resolve();
          },
        });
      });
    },
    [history, model, setHistory, chat, scene, chatId],
  );

  return (
    <>
      <MuiLoading visible={loading} />
      {/* <Header
        refreshHistory={getHistory}
        modelChange={(newModel: string) => {
          setModel(newModel);
        }}
      /> */}
      <div className="flex flex-1 flex-wrap overflow-hidden relative" style={{ height: '100%', paddingTop: '14px' }}>
        {!!chartsData?.length && (
          <div className="w-full xl:w-3/4 h-3/5 xl:pr-4 xl:h-full overflow-y-auto">
            <Chart chartsData={chartsData} />
          </div>
        )}
        {!chartsData?.length && scene === 'chat_dashboard' && (
          <Empty
            image="/empty.png"
            description="暂无数据"
            imageStyle={{ width: 320, height: 320, margin: '0 auto', maxWidth: '100%', maxHeight: '100%' }}
            className="w-full xl:w-3/4 h-3/5 xl:h-full pt-0 md:pt-10"
          />
        )}
        {/** chat panel */}
        <div
          className={classNames('flex flex-1 flex-col overflow-hidden px-1', {
            'px-0 xl:pl-4 h-2/5 xl:h-full border-t xl:border-t-0 xl:border-l': scene === 'chat_dashboard',
            'h-full': scene !== 'chat_dashboard',
          })}
        >
          <Completion messages={history} onSubmit={handleChat} tempMsg={tempMessage} cancelRequest={cancelRequest} isLoading={isLoading} setIsLoading={setIsLoading} />
        </div>
      </div>
    </>
  );
};

export default ChatContainer;
